<template>
  <span class="vuefinder__item-icon">
    <!-- <FolderSVG
      v-if="type === 'dir'"
      :class="small ? 'vuefinder__item-icon--small' : 'vuefinder__item-icon--large'"
    />
    <FileSVG
      v-else-if="path.includes('.pdf')"
      key="file"
      :class="[
        small ? 'vuefinder__item-icon--small' : 'vuefinder__item-icon--large',
        'file-icon',
      ]"
    /> -->
    <img
      v-if="type === 'dir'"
      class="vuefinder__explorer__item-thumbnail lazy"
      :class="[
        small ? 'vuefinder__item-icon--small' : '',
        viewType === 'list'
          ? 'vuefinder__explorer__item-list'
          : 'vuefinder__explorer__item-grid',
      ]"
      :src="getImageUrl('folder.svg')"
    />
    <img
      v-else
      class="vuefinder__explorer__item-thumbnail lazy"
      :class="[
        small ? 'vuefinder__item-icon--small' : '',
        viewType === 'list'
          ? 'vuefinder__explorer__item-list'
          : 'vuefinder__explorer__item-grid',
      ]"
      :src="getImageUrl(config(path))"
    />
  </span>
</template>

<script setup>
import { inject, ref, watch, onMounted, onUnmounted } from 'vue'
import { getImageUrl } from '../utils/common.js'
defineProps({
  type: {
    type: String,
    required: true,
  },

  path: {
    type: String,
    required: true,
  },

  small: {
    type: Boolean,
    default: false,
  },
})
const app = inject('ServiceContainer');
const { getStore } = app.storage
const viewType = ref('grid')

watch(
  () => app.view,
  () => {
    console.log(app.view)
    viewType.value = app.view
  }
)

onMounted(() => {
  // 初始加载值
  loadStorageValue()
  // 监听storage事件
  window.addEventListener('storage', handleSpecificStorageChange)
})

onUnmounted(() => {
  window.removeEventListener('storage', handleSpecificStorageChange)
})

// 加载初始值
const loadStorageValue = () => {
  const storedValue = getStore('viewport', 'grid')
  if (storedValue) {
    viewType.value = storedValue
  }
}

// 只处理特定键的变化
const handleSpecificStorageChange = (event) => {
  if (event.key === 'viewport') {
    viewType.value = event.newValue
    console.log(111, viewType.value);
    
  }
}

const config = (path) => {
  const suffix =
    path.lastIndexOf('.') > -1 ? path.slice(path.lastIndexOf('.') + 1) : ''
  const type = suffix.toLowerCase()
  let icon = ''
  switch (type) {
    case 'pdf':
      icon = 'pdf.svg'
      break
    case 'doc':
    case 'docx':
      icon = 'doc.svg'
      break
    case 'txt':
      icon = 'txt.svg'
      break
    case 'psd':
    case 'psb':
      icon = 'psd.svg'
      break
    case 'xls':
    case 'xlsx':
      icon = 'excel.svg'
      break
    case 'ai':
      icon = 'ai.svg'
      break
    case 'cad':
      icon = 'cad.svg'
      break
    case 'cdr':
      icon = 'cdr.svg'
      break
    default:
      icon = 'file.svg'
      break
  }
  return icon
}
</script>
<style scoped>
/* 作用域穿透 + 唯一类名控制颜色 */
/* ::v-deep(.file-icon) path {
  fill: #2196f3;
} */

/* ::v-deep(.pdf-icon) path {
  fill: #f44336;
} */
</style>
